<template>
    <div class="product_contaner">
      <div class="chart" id="chart_left3"></div>
    </div>
  </template>
  
  <script>
  export default {
      name: 'productComponent',
      data() {
          return {
  
          }
      },
      mounted() {
          this.getEchart()
      },
      methods: {
          getEchart() {
              const chartDom = document.getElementById('chart_left3');
              const myChart = this.$echarts.init(chartDom);
              let option;
  
              option = {
                  // legend: {},
                  tooltip: {
                    trigger: 'axis'
                  },
                  grid: {
                      top: '3%',
                      left: '1%',
                      right: '1%',
                      bottom: '3%',
                      containLabel: true
                  },
                  xAxis: [
                      {
                      type: 'category',
                      axisLabel:{
                          interval: 0,
                          textStyle: {
                            color: '#b3ccf8',
                            fontSize: 11
                         },
                      },
                      data: ['0~30天', '30~60天', '60~90天', '90~180天', '180~365天', '365以上']
                      }
                  ],
                  yAxis: [
                      {
                        type: 'value',
                        axisLabel:{
                            interval: 0,
                            textStyle: {
                                color: '#b3ccf8',
                                fontSize: 11
                            },
                        },
                      }
                  ],
                  emphasis: {
                          itemStyle: {
                              shadowBlur: 10,
                              shadowOffsetX: 0,
                              shadowColor: 'rgba(0, 0, 0, 0.5)'
                          }
                  },
                  series: [
                      {
                          name: '总计',
                          type: 'line',
                          emphasis: {
                              focus: 'series'
                          },
                          data: [699, 334, 76, 318, 283, 376]
                      },
                      {
                          name: 'DPM-玻璃来料不良仓',
                          type: 'bar',
                          stack: 'Ad',
                          emphasis: {
                              focus: 'series'
                          },
                          data: [0, 3, 1, 0, 0, 0]
                      },
                      {
                          name: 'DPM-项目管理材料仓',
                          type: 'bar',
                          stack: 'Ad',
                          emphasis: {
                              focus: 'series'
                          },
                          data: [16,34,22, 86, 28, 0]
                      },
                      {
                          name: 'DPM-战略材料仓',
                          type: 'bar',
                          stack: 'Ad',
                          emphasis: {
                              focus: 'series'
                          },
                          data: [0, 0, 12, 31, 0, 0]
                      },
                      {
                          name: 'IA-代工材料仓',
                          type: 'bar',
                          stack: 'Ad',
  
                          data: [12, 8, 0, 3, 11, 0],
                          emphasis: {
                              focus: 'series'
                          }
                      },
                      {
                          name: 'IT-代工材料仓',
                          type: 'bar',
                          stack: 'Ad',
                          emphasis: {
                              focus: 'series'
                          },
                          data: [24, 1, 1, 0, 2, 1]
                      },
                      {
                          name: 'IT-战略材料仓',
                          type: 'bar',
                          stack: 'Ad',
                          emphasis: {
                              focus: 'series'
                          },
                          data: [2, 11, 4, 0,0, 7]
                      },
                      {
                          name: 'MD-代工材料仓',
                          type: 'bar',
                          stack: 'Ad',
                          emphasis: {
                              focus: 'series'
                          },
                          data: [25, 11, 4, 0,0, 7]
                      },
                      {
                          name: 'Sales战略备料仓',
                          type: 'bar',
                          stack: 'Ad',
                          emphasis: {
                              focus: 'series'
                          },
                          data: [25, 87, 4, 12,0, 7]
                      },
                      {
                          name: 'TV-代工材料仓',
                          type: 'bar',
                          stack: 'Ad',
                          emphasis: {
                              focus: 'series'
                          },
                          data: [2, 43, 4, 0,61, 7]
                      },
                      {
                          name: 'TV-战略材料仓',
                          type: 'bar',
                          stack: 'Ad',
                          emphasis: {
                              focus: 'series'
                          },
                          data: [22, 11, 4, 0,0, 7]
                      },
                      {
                          name: '供应链企划处材料仓',
                          type: 'bar',
                          stack: 'Ad',
                          emphasis: {
                              focus: 'series'
                          },
                          data: [23, 15, 4, 0,0, 7]
                      },
                      {
                          name: '过期物料仓',
                          type: 'bar',
                          stack: 'Ad',
                          emphasis: {
                              focus: 'series'
                          },
                          data: [2, 11, 4, 185,158, 7]
                      },
                      {
                          name: '项目管理材料仓',
                          type: 'bar',
                          stack: 'Ad',
                          emphasis: {
                              focus: 'series'
                          },
                          data: [2, 11, 4, 0,23, 313]
                      },
                      {
                          name: '原材料仓',
                          type: 'bar',
                          stack: 'Ad',
                          emphasis: {
                              focus: 'series'
                          },
                          data: [544, 77, 4, 0,0, 7]
                      },
                      {
                          name: '租赁外仓-M2项目管理材料仓',
                          type: 'bar',
                          stack: 'Ad',
                          emphasis: {
                              focus: 'series'
                          },
                          data: [2, 11, 4, 0,11, 7]
                      },
                     
                  ]
              };
  
              option && myChart.setOption(option);
              window.addEventListener('resize', () => {
                 myChart.resize()
              })
  
          }
      }
  }
  </script>
  
  <style lang="scss" scoped>
  .product_contaner {
    .chart {
      height: 4rem;
      width: 100%;
    }
  }
  </style>